<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>角色</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<!--<link rel="stylesheet" href="css/public.css" media="all">-->
		<style>
			body {
				background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<form class="layui-form" id="forms">
			<div class="layui-form-item" hidden="hidden">
				<label class="layui-form-label">ID:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="id" name="id" required lay-verify="required" class="layui-input">
				</div>
			</div>
		</form>
		<div id="role_transfer" class="demo-transfer"></div>
	   <script src="layui/layui.js" charset="utf-8"></script>
		<script src="js/User.js" charset="utf-8"></script>
		<script type="text/javascript">
			layui.use(['transfer', 'form'], function() {
				var transfer = layui.transfer,
					$ = layui.jquery;
				setTimeout(function() {
					var rdata = new Array();
					//add your code
					$.post(globalData.server + "user/getUserRolesCSK", {
						"id": document.getElementById("id").value
					}, function(result) {
						if(result.count > 0) {
							for(var i = 0; i < result.data.length; i++) {
								rdata.push(result.data[i].id)
							}
						}
					}, "json");
					setTimeout(function() {
						$.post(globalData.server + "user/getRolesCSK", {
							"id": document.getElementById("id").value
						}, function(data) {
							transfer.render({
								elem: '#role_transfer',
								data: data.data,
								title: ['系统所有角色', '用户所有角色'],
								parseData: function(res) {
									return {
										"value": res.id,
										"title": res.name
									}
								},
								value: rdata,
								id: 'role_transfer_id',
								onchange: function(obj, index) {
									if(index == "0") {
										for(var i = 0; i < obj.length; i++) {
											$.post(globalData.server + "user/addRolesCSK", {
												"userId": document.getElementById("id").value,
												"roleId": obj[i].value
											}, function(result) {}, "json");
										}
									} else {
										for(var i = 0; i < obj.length; i++) {
											$.post(globalData.server + "user/deleteRoles", {
												"userId": document.getElementById("id").value,
												"roleId": obj[i].value
											}, function(result) {}, "json");
										}
									}
								}
							});
						}, "json");
					}, 150);
				}, 100);

			});
		</script>
	</body>

</html>